<template>
  <h2>输入值:{{message}}</h2>
  <test-c v-model="message"></test-c>
  <el-divider/>

  <h2>选中值:{{selData}}</h2>
  <common-dict-select v-model="selData" :dict-key="SYSTEM_MODULE"></common-dict-select>

  <el-divider/>
  <el

  <el-divider/>
  <el-date-picker
      v-model="timeRange"
      type="datetimerange"
      range-separator="至"
      value-format="YYYY-MM-DD HH:mm:ss"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
  </el-date-picker>
  <el-button @click="getTimeRange">获取时间</el-button>
</template>
<script lang="ts" setup>
import {ref} from "vue";

const message = ref<string>('')
const selData = ref<string>('1')
const wsMessage = ref<string>('')

import TestC from "@/components/test/testC.vue";
import CommonDictSelect from "@/components/common/CommonDictSelect.vue";
import {SYSTEM_MODULE} from "@/constants/dict-constants.ts";
import {WEB_SOCKET_URL} from "@/constants/common-constant.ts";
import {getToken} from "@/utils/user-utils.ts";
import {elMessageTip} from "@/utils/tip-utils.ts";

let webSocket: any = null;

const openWs = () => {
  webSocket = new WebSocket(WEB_SOCKET_URL, getToken());

  webSocket.onopen = (event:any) => {
    elMessageTip('success', '开启新的连接')
  }

  webSocket.onmessage = (event:any) => {
    const message = JSON.stringify(event.data)
    elMessageTip('success', message)
    console.log(`收到服务端发送的消息，消息内容 -> ${message}`)
  }

  webSocket.onerror = (error:any) => {
    console.log(`WebSocket连接异常 -> ${error}`)
  }

  webSocket.onclose = (event:any) => {
    console.log(`WebSocket连接关闭  -> ${event}`)
  }
}

const sendMessage = () => {
  const aa = wsMessage.value
  webSocket.send(aa)
}

const closeWs = () => {
  webSocket.close()
}

const timeRange = ref<any>([])
const getTimeRange = () => {
  console.log(timeRange.value)
}

</script>

<style scoped>

</style>
